<template>
  <ElScrollbar class="data-box-scroll">
  <div class="data-box">
    <div class="data-item">
      <div class="data-title">{{ data.sumReceptionVolume ? data.sumReceptionVolume.toFixed(2) : '0.00' }}</div>
      <div class="data-value">总接待量</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.sumIgnoreReceptionVolume ? data.sumIgnoreReceptionVolume.toFixed(2) : '0.00' }}</div>
      <div class="data-value">标后总量</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.averageDayReceptionVolume ? data.averageDayReceptionVolume.toFixed(2) : '0.00' }}</div>
      <div class="data-value">日均接待</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.averageIgnoreDayReceptionVolume ? data.averageIgnoreDayReceptionVolume.toFixed(2) : '0.00' }}</div>
      <div class="data-value">标后日均</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.averageResponseTime ? data.averageResponseTime.toFixed(2) : '0.00' }}</div>
      <div class="data-value">平均响应</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.averageIgnoreResponseTime ? data.averageIgnoreResponseTime.toFixed(2)  : '0.00' }}</div>
      <div class="data-value">标后均响</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.averageResponseRate ? data.averageResponseRate.toFixed(2) + '%'  : '0.00%' }}</div>
      <div class="data-value">平均回复</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.averageIgnoreResponseRate ? data.averageIgnoreResponseRate.toFixed(2) : '0.00' }}</div>
      <div class="data-value">标后回复</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.averageQARatio ? data.averageQARatio.toFixed(2) + '%' : '0.00%' }}</div>
      <div class="data-value">平均问答</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.averageIgnoreQARatio ? data.averageIgnoreQARatio.toFixed(2) : '0.00' }}</div>
      <div class="data-value">标后问答</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.sumCount ? data.sumCount.toFixed(2) : '0.00' }}</div>
      <div class="data-value">数据总行数</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.ignoreCount ? data.ignoreCount.toFixed(2) : '0.00' }}</div>
      <div class="data-value">打标行数</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.ignoreProportion }}</div>
      <div class="data-value">打标占比</div>
    </div>
    <div class="data-item">
      <div class="data-title">{{ data.restDays || 0 }}</div>
      <div class="data-value">请假天数</div>
    </div>
  </div>
</ElScrollbar>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const props = withDefaults(defineProps<{ data: any }>(), {
  data: () => ({})
})

const data = computed(() => {
  return props.data || {}
})

</script>

<style scoped lang="scss">
.data {
  &-box-scroll {
    width: 100%;
    border: 1px solid #E6EBF1;
  }
  &-box {
    width: max-content;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center
  }
  &-item {
    box-sizing: border-box;
    padding: 0 27px;
    border-right: 1px solid #E6EBF1;
    min-width: 110px;
    &:nth-last-of-type(1) {
      border-right: none;
    }
  }
  &-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
  }

  &-value {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 12px;
    color: #757575;
    margin-top: 3px;
  }

  &-before {
    box-sizing: border-box;
    padding: 10px;
    margin-top: 20px;
  }
}
</style>
